<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">系统公告</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 栅格 -->
            <el-row :gutter="20">
                <!-- 栅格 -->
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-button type="primary" @click="clickNoticefun">添加视频</el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-input placeholder="关键词" v-model="Noticedata" class="input-with-select" clearable
                            @clear="getNotice">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-row>
            <!-- 表格 -->
            <el-table class="tabletop" :border="true" :data="NoticetableData" style="width: 100%">
                <el-table-column prop="content" label="内容">
                </el-table-column>
                <el-table-column prop="topfix" label="是否置顶">
                    <template slot-scope="scope">
                        {{ scope.row.topfix == 1 ? '置顶' : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.ctime | dataFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editNoticefun(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="delNoticefun(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="Noticelist._page" :page-sizes="[10, 20, 30, 40]" :page-size="Noticelist._size" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 弹出的对话框 -->
        <el-dialog :title="truefalse == false ? '添加公告' : '修改公告'" :before-close="Closethewindow"
            :visible.sync="dialogVisible" width="70%">
            <el-form :model="dialogBox" :rules="dialogBoxrules" ref="dialogBoxrules" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="公告内容" prop="content">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dialogBox.content">
                    </el-input>
                </el-form-item>
                <el-form-item label="是否置顶">
                    <el-switch v-model="dialogBox.topfix">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Closethewindow">取 消</el-button>
                <el-button type="primary" @click="addNoticefun">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { GetNoticeList, AddNotice, EditNotice, DelNotice } from '../api/Notice.js'
export default {
    data() {
        return {
            // 搜索框绑定数值
            Noticedata: '',
            // 数据存储
            NoticetableData: [],
            // 分页器绑定的请求数据
            Noticelist: {
                _orderd: 'topfix, ctime',
                _page: 0,
                _size: 10
            },
            // 总条数
            total: 0,
            // 控制添加和编辑的切换
            truefalse: false,
            // 对话框的显示和隐藏
            dialogVisible: false,
            dialogBox: {
                content: '',
                topfix: false
            },
            // 表单验证
            dialogBoxrules: {
                content: [
                    { required: true, message: '请输入视频标题', trigger: 'blur' }
                ]
            },
            // 编辑数据存放
            editdata: {}
        }
    },
    created() {
        this.getNotice()
    },
    methods: {
        // 每页条数发生变化时
        handleSizeChange(val) {
            this.Noticelist._size = val
            this.getNotice()
        },
        // 页码发生变化时
        handleCurrentChange(val) {
            this.Noticelist._page = val
            this.getNotice()
        },
        // 搜索点击按钮
        async search() {
            const params = {
                _search: this.Noticedata,
                _orderd: this.Noticelist._orderd,
                _page: this.Noticelist._page,
                _size: this.Noticelist._size
            }
            const { data } = await GetNoticeList(params)
            console.log(data);
            if (data.code !== 1) return this.$message.error('搜索视频管理列表内容失败')
            this.NoticetableData = data.list
            this.total = data.pager.total
        },
        // 点击添加按钮和编辑事件
        clickNoticefun() {
            this.truefalse = false
            this.dialogVisible = true
        },
         // 编辑对话框
         editNoticefun(row) {
            console.log(row);
            this.truefalse = true
            this.dialogVisible = true
            this.dialogBox = {
                content: row.content,
                topfix: row.topfix === '1'? true : false
            }
            this.editdata = this.dialogBox
            this.editdata.id = row.id
        },
        // 对话框里的确定按钮
        addNoticefun() {
            this.$refs.dialogBoxrules.validate((v) => {
                if (!v) return
                if (this.truefalse == false) {
                    this.dialogBox.topfix = this.dialogBox.topfix ? '1' : '0'
                    this.addNotice()
                } else {
                    this.editdata.topfix = this.editdata.topfix ? '1' : '0'
                    this.editNotice()
                }
                // 刷新数据列表
                this.getNotice()
                // 触发关闭对话框
                this.Closethewindow()
            })

        },
        // 删除
        async delNoticefun(row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirm !== 'confirm') return this.$message.info('已取消')
            this.delNotice(row.id)
        },
        // 关闭对话框事件
        Closethewindow() {
            this.dialogVisible = false
        },
        // 请求区😎😎😎😎😎
        // 列表数据渲染
        async getNotice() {
            const { data } = await GetNoticeList(this.Noticelist)
            console.log(data);
            if (data.code !== 1) return this.$message.error('获取视频管理列表失败')
            // 数据赋值
            this.NoticetableData = data.list
            // 总条数赋值
            this.total = data.pager.total
        },
        // 添加
        async addNotice() {
            const { data } = await AddNotice(this.dialogBox)
            console.log(data);
            if (data.code !== 1) return this.$message.error('添加失败')
            this.$message.success('添加成功')
        },
        // 修改
        async editNotice() {
            const { data } = await EditNotice(this.editdata)
            console.log(data);
            if (data.code !== 1) return this.$message.error('修改失败')
            this.$message.success('修改成功')
        },
        // 删除
        async delNotice(id) {
            const { data } = await DelNotice({ id })
            if (data.code !== 1) return this.$message.error('删除失败')
            this.$message.success('删除成功')
            this.getNotice()
        }
    }
}
</script>

<style>

</style>